<template>
  <div id="text_property">
    <template>
      <a-collapse expandIconPosition="right">
        <a-collapse-panel header="内容" :style="customStyle">
          <!-- <div class="subTitle">
            <a-space
              >禁用<a-switch default-checked v-model="activeWidget.config.disabled"
            /></a-space>
          </div>
          <div class="rowLayout">
            <div class="rowLayout_select">
              <a-select
                default-value="default"
                v-model="activeWidget.config.mode"
                class="rowLayout_select_select"
                :options="dropdown_mode_option"
              >
              </a-select>
              <div>下拉框模式</div>
            </div>
            <div class="rowLayout_input">
              <a-input default-value="输入提示信息" v-model="activeWidget.config.placeholder"/>
              <div>文本</div>
            </div>
          </div>
          <div class="subTitle">数据</div> -->
          <div class="rowLayout">
            <div class="dragDown_edit">
              <div class="dragDown_edit_title">
                勾选一项作为默认项，未勾选则默认第一项。
              </div>
              <div class="dragDown_edit_content">
                <div class="dragDown_edit_content_bar">
                  <a-button
                    @click="addItem"
                    class="dragDown_edit_content_bar_btn"
                    ><a-icon type="plus" />添加</a-button
                  >
                  <a-button
                    @click="moveUp"
                    class="dragDown_edit_content_bar_btn"
                    ><a-icon type="arrow-up" />上移</a-button
                  >
                  <a-button
                    @click="moveDown"
                    class="dragDown_edit_content_bar_btn"
                    ><a-icon type="arrow-down" />下移</a-button
                  >
                  <a-button
                    @click="deleteItem"
                    class="dragDown_edit_content_bar_btn"
                    ><span><a-icon type="close" />删除</span></a-button
                  >
                </div>
                <div class="dragDown_edit_content_item">
                  <a-checkbox-group @change="onChange">
                    <a-radio-group
                      @change="radioChange"
                      class="dragDown_edit_content_item_radio_group"
                    >
                      <div
                        v-for="(o, idx) in items"
                        :key="o.key"
                        class="dragDown_edit_content_item_div"
                      >
                        <a-radio-button
                          :value="o.value"
                          :key="o.key"
                          :index="idx"
                          class="universal"
                          @click="click1(o)"
                        >
                          <a-checkbox
                            :value="o.value"
                            :checked="o.checked"
                            @change="groupChange(o)"
                            class="dragDown_edit_content_item_check"
                          >
                            <a-input
                              v-model="o.value"
                              class="dragDown_edit_content_item_input"
                              :style="
                                selItems == items[idx].key
                                  ? 'backgroundColor: #E1FBFB'
                                  : 'backgroundColor: #FFFFFF'
                              "
                            />
                          </a-checkbox>
                        </a-radio-button>
                      </div>
                    </a-radio-group>
                  </a-checkbox-group>
                </div>
                <div class="dragDown_edit_content_make">
                  <a-space>
                    <a-button @click="cancel"> 取消 </a-button>
                    <a-button type="primary" @click="saveData"> 确定 </a-button>
                  </a-space>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </template>
    <div>
      <br />
      <!-- <a-radio-group v-model="value1" @change="onChange">
        <a-radio-button value="a"> Hang </a-radio-button>
        <a-radio-button value="b"> Shanghai </a-radio-button>
        <a-radio-button value="c"> Beijing </a-radio-button>
        <a-radio-button value="d"> Chengdu </a-radio-button>
      </a-radio-group> -->

      <a-tabs default-active-key="1">
      <a-tab-pane v-for="item in tabItems" :key="item.id" style="background:red;">
        {{item.content}}
        <span slot="tab">
          <a-icon type="apple"></a-icon>{{item.name}}
        </span>
        <div>呵呵</div>
      </a-tab-pane>
    </a-tabs>
    </div>
  </div>
</template>
<script>
// import { Ability } from 'mse-common'
export default {
  data() {
    return {
      customStyle: "border: 0;overflow: hidden",
      dropdown_mode_option: [
        { label: "default", value: "default" },
        { label: "multiple", value: "multiple" },
        { label: "tax", value: "tax" },
        { label: "combobox", value: "combobox" },
      ],
      backgroundColor: "background-color: #FFFFFF;",
      items: [],
      selItems: "",
      defaultSel: "",
      value: "1",
      value1: "a",
      tabItems:[{
        id:111,
        name:"标签1",
        content:"内容1"
      },{
        id:222,
        name:"标签2",
        content:"内容2"
      },{
        id:333,
        name:"标签3",
        content:"内容3"
      },]
    };
  },
  computed: {},
  watch: {
    // '$store.state.MseBasisEnv.activeWidgetId': function (id) {
    //   if (Ability.String.isNotEmpty(id)) {
    //     this.init()
    //   }
    // }
  },
  created() {
    // this.init()
  },
  onEvents: {},
  methods: {
    // init () {
    //   const widget = this.$store.getters['MseBasisEnv/activeWidget']
    //   if (widget && widget.position && widget.style) {
    //     this.activeWidget = widget
    //   } else {
    //     this.activeWidget = null
    //   }
    //   // console.log(this.activeWidget.config.options)
    //   if (this.activeWidget.config.options.length > 0) {
    //     this.items = this.activeWidget.config.options
    //   }
    // },
    onChange(e) {
      console.log(e);
    },
    click1(e) {
      console.log(e);
      //this.selItems = e.target.value
      this.selItems = e.key;
    },
    addItem() {
      const length = this.items.length + 1;
      this.items.push({
        value: "项目" + length,
        key: this.uuid(),
        checked: false,
      });
      // var itemData=""
      // itemData+='{"value": "项目", "key":12, "checked": false}'+"/"
      // for(let i=0;i<itemData.split('/').length-1;i++){
      //   var obj=itemData.split('/')[i]
      //   this.items.push(JSON.parse(obj))
      //   console.log(this.items)
      // }
    },
    moveUp() {
      if (this.selItems) {
        const sele = this.selItems;
        const index = this.items.indexOf(
          this.items.filter((d) => d.key === sele)[0]
        );
        const obj = this.items[index];
        if (index > 0) {
          this.items.splice(index, 1);
          this.items.splice(index - 1, 0, obj);
        }
      }
    },
    moveDown() {
      if (this.selItems) {
        const sele = this.selItems;
        const index = this.items.indexOf(
          this.items.filter((d) => d.key === sele)[0]
        );
        console.log(index);
        const obj = this.items[index];
        if (index >= 0) {
          this.items.splice(index, 1);
          this.items.splice(index + 1, 0, obj);
        }
      }
    },
    deleteItem() {
      if (this.selItems) {
        const sele = this.selItems;
        const index = this.items.indexOf(
          this.items.filter((d) => d.key === sele)[0]
        );
        this.items.splice(index, 1);
      }
    },
    radioChange(e) {
      console.log(e);
      // console.log(e.target.value)
      e.stopPropagation();
      // this.backgroundColor = 'background-color: #E1FBFB;'
    },
    groupChange(e) {
      // console.log(e) value值
      // this.selItems = e
      // e.stopPropagation()
      // console.log(e.target.checked)
      // console.log(e.target.value)
      if (this.defaultSel) {
        const index1 = this.items.indexOf(
          this.items.filter((d) => d.key === this.defaultSel)[0]
        );
        this.items[index1].checked = false;
      }
      const index = this.items.indexOf(
        this.items.filter((d) => d.key === e.key)[0]
      );
      if (!e.checked) {
        this.items[index].checked = true;
      } else {
        this.items[index].checked = false;
      }
      // value值
      // this.defaultSel = e.target.key
      this.defaultSel = e.key;
    },
    cancel() {
      this.items = [];
      // this.activeWidget.config.options = []
    },
    saveData() {
      const index = this.items.indexOf(
        this.items.filter((d) => d.key === this.defaultSel)[0]
      );
      console.log(this.items[index].value);
      this.$message.info("保存成功！");
      // this.activeWidget.config.options = this.items
      // if (this.defaultSel) {
      //   const index = this.items.indexOf(this.items.filter(d => d.key === e.target.key)[0])
      //   this.activeWidget.config.defaultOption = this.items[index].value
      // } else {
      //   this.activeWidget.config.defaultOption = this.items[0].value
      // }
    },
    uuid() {
      var tempUrl = URL.createObjectURL(new Blob());
      var uuid = tempUrl.toString();
      URL.revokeObjectURL(tempUrl);
      return uuid.substr(uuid.lastIndexOf("/") + 1);
    },
  },
};
</script>
<style scoped>
/* input[type='radio'], input[type='checkbox']{
  background-color: rgb(233, 10, 199);
} */
/* .span.ant-radio.ant-radio-checked{
  background-color: rgb(233, 10, 199);
}
span.ant-radio{
  background-color: rgb(5, 207, 207);
} */

/* .ant-radio-wrapper */
/* .ant-radio-input{
  background-color: rgb(224, 15, 26);
  opacity:1;
  z-index:999;
  position:relative;
}
.ant-radio{
  background-color: rgb(233, 10, 199);
} */
/* div.ant-radio-group.ant-radio-group-outline.ant-radio-group-default{
  background-color: rgb(7, 0, 6);
}
.ant-radio-button-wrapper.ant-radio-button-wrapper-checked{
  background-color: rgb(6, 228, 73);
}
label.ant-radio-button-wrapper{
  background-color: rgb(250, 9, 150);
} */

/* .ant-radio-wrapper ant-radio-wrapper-checked{
  background-color: rgb(240, 4, 220);
}
.ant-radio-group.ant-radio-wrapper.ant-radio.ant-radio-checked{
  background-color: rgb(247, 14, 14);
  border-color: red;
} */
/* .ant-radio{
  z-index: 100;
  background: #047e7e;
  border-color: #f30c0c;
} */
#text_property {
  font-family: PingFang SC;
  color: #252940;
  width: 100%;
}
.checkbox_group {
  width: 100%;
}
.subTitle {
  margin-bottom: 10px;
  font-family: PingFang SC;
  color: #252940;
  font-weight: 400;
}
.rowLayout {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rowLayout_check {
  text-align: center;
  width: 8%;
  margin-top: 1%;
}
.rowLayout_div {
  text-align: center;
  width: 90%;
}
.rowLayout_select {
  text-align: center;
  width: 48%;
}
.rowLayout_select_select {
  width: 100%;
}
.rowLayout_input {
  text-align: center;
  width: 48%;
}
.dragDown_edit {
  width: 100%;
  border: 1px solid #d8d9e4;
  border-radius: 2px;
}
.dragDown_edit_title {
  width: 100%;
  border-bottom: 1px solid #d8d9e4;
  padding: 10px 10px 10px 10px;
}
.dragDown_edit_content_bar {
  display: flex;
  padding: 0% 5% 0% 5%;
  justify-content: space-between;
  margin-top: 5px;
  margin-bottom: 5px;
}
.dragDown_edit_content_item {
  border: 1px solid #d8d9e4;
  width: 90%;
  margin: 10px 5% 10px 5%;
  padding: 10px 10px 10px 10px;
}
.dragDown_edit_content_make {
  padding-left: 60%;
  padding-bottom: 5px;
}
.dragDown_edit_content_bar_btn {
  border: 0px;
  margin: 0px;
}
.dragDown_edit_content_item_check {
  background: #fc0404;
  width: 60%;
}
.dragDown_edit_content_item_input {
  border: 0px;
  width: 70%;
  background: #c6fc04;
}
.universal {
  width: 100%;
  border: 0px;
  background: #f50469;
}
.dragDown_edit_content_item_radio_group {
  width: 100%;
  border: 0px;
  background: #0f0cf0;
}
.dragDown_edit_content_item_div {
  width: 100%;
  margin: 5px 0px 5px 0px;
  border: 0px;
}
/*自定义按钮填充色*/
.ant-radio-group-solid
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background-color: #e1fbfb;
  border-color: #ffffff;
  border: none;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  z-index: 100;
  color: #595959;
  background: #e1fbfb;
  border-color: #ffffff;
  border: none;
  /* border-color: red; */
  -webkit-box-shadow: -1px 0 0 0 red;
  box-shadow: -1px 0 0 0 red;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
  z-index: 100;
  background: #e1fbfb;
  border-color: #ffffff;
  border: none;
}
</style>
